<#include "/WEB-INF/fragment/head.ftl">
 <style type="text/css">
.pic{margin: 50px;}
.clazz{text-align: left;margin: 0 auto;}
ul{margin-left: 50px;}
li{list-style-type: none;}
.li{padding:20px 20px 20px 10px;margin: 0 auto;width: 350px;border-style: solid;border-width: 1px;background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=650310328,1502655589&fm=23&gp=0.jpg");background-size: 300px 130px;background-repeat: no-repeat;}
.create-team{text-align: center;}
.head{background-color: rgb(208,14,49);padding-bottom: 10px;padding-top: 10px;margin-bottom: 0px;color: white;  }  
.login{background-color: gray;padding: 4px;}
.login-fr{padding-right: 10px;width: 110px;height: 60px;}
.title{padding-left:  20px;padding-top:20px;font-size: 18px;}

</style>
<body>
<div class="container">
  <#include "/WEB-INF/identifyLogin.ftl">
  
    <div class="pic" align="center"><img class="click" src="http://172.16.1.55/logo.png"></div>
    <div class="team-list">
        <ul class="clearfix">
           <!--  <div class="clazz fl"><li class="li"><div><a href="">java</a><div class="fr"><label>20170322</label></div></div>
            <div>manager</div></li></div>
            <div class="clazz"><li class="li"><div><a href="">ui</a><div class="fr"><label>20170322</label></div></div><div>manager</div></li></div>
            <div class="clazz fl"><li class="li"><div><a href="">java</a><div class="fr"><label>20170322</label></div></div><div>manager</div></li></div> -->
        </ul>
    </div>
    <div class="create-team"><a href="${request.contextPath}/-team"><img src="./assets/img/create.png"></a><a href="${request.contextPath}/_register1"><img src="./assets/img/joinus.png"></a>
    </div>
</div>

<script id="index_team_item" type="text/tms-template">
<li class="li fl"><div><a href="">{{name}}</a><div class="fr"><label>20170322</label></div></div><div>{{desc}}</div></li>
</script>

<script>
    (function(){
        $.getJSON('${request.contextPath}/team_list.action', {}, function(json, textStatus) {
                /*optional stuff to do after success */
                var html=$('#index_team_item').html();
                for(var i in json){
                    $('.team-list>ul').append(parse(html,json[i]));
                }
        });
        function parse(html, data) {
            var str = html;
            for(var i in data) {
                str = str.replace('{{' + i + '}}', data[i]);
            }
            return str;
        }
    }
        )();
    

</script>
</body>
</html>